<template>
    <div class="loadingBox" v-on:click="clickEvent">
      <i class="icon iconfont" v-bind:class=" {'icon-jiazai loadingIcon': !noMoreCoupon, 'icon-shuaxin': noMoreCoupon}"></i>
        <span v-show="!noMoreCoupon">正在加载更多数据</span>
        <span v-show="noMoreCoupon">没有更多</span>
        <!--{{count}}-->
    </div>
</template>

<script>
    import * as types from '../../vuex/types.js'
    import { mapGetters, mapState } from 'vuex'
    export default {
        name: 'listLoading',
        props:["noMoreCoupon","count"],
        computed:{
            ...mapGetters({
                loading:'loading'

            }),
            ...mapState({
                loadingText:state => state.com.loadingText
            })
        },
        methods:{
            clickEvent:function(){
                this.$emit('clickEvent')
            }
        }

    };
</script>

<style lang="css">
    .loadingBox{margin: .667rem;background: #fafafa;height: 2rem;line-height:2rem;border:1px solid #f3f3f3;border-radius: .2rem;text-align: center;color:#999;font-size: .7rem;}
    .loadingIcon {
        display: inline-block;
        height: auto;
        animation: mint-spinner-rotate 1s infinite linear;
    }

    @keyframes mint-spinner-rotate {
        0% {
            -webkit-transform: rotate(0deg);
            -webkit-transform-origin:50% 50% 0px;
        }
        100% {
            -webkit-transform: rotate(360deg);
            -webkit-transform-origin:50% 50% 0px;
        }
    }
</style>